<template>
  <Mainframe title='申请/审核记录列表'>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="applyId"
          default-expand-all
      >
        <el-table-column prop="applyId" label="申请单号" sortable/>
        <el-table-column prop="customerName" label="客户名称" sortable/>
        <el-table-column prop="loanType" label="计息方式" sortable>
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ lornTypeTxt(scope.row.loanType) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额(元)" sortable/>
        <el-table-column prop="createDate" label="申请日期" sortable/>

        <el-table-column prop="auditDate" label="审核日期" sortable/>
        <el-table-column prop="status" label="状态" sortable>
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ statusTxt(scope.row.status) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button size="small" @click="handleApprove(scope.$index, scope.row)"
            >同意</el-button
            >
            <el-button
                size="small"
                type="danger"
                @click="handleDeny(scope.$index, scope.row)"
            >拒绝</el-button
            >
          </template>
        </el-table-column>

      </el-table>
    </div>
  </Mainframe>
</template>

<style scoped>
</style>

<script>


import {reactive} from "vue";
import Mainframe from "@/components/mainframe/index.vue";
import getApplyListData, {auditDeny, auditOk, submitApply} from '@/saga/APi';
export default {
  name: 'ApplyList',
  data() {
    return {

      tableData: [
        {
          applyId: 31,
          customerName: 'xiaoming',
          createDate: new Date(),
          auditDate: new Date(),
          loanType: 1,
          amount: 1000.2,
          memo: '',
          status: 1
        },

        {
          applyId: 31,
          customerName: 'honghong',
          createDate: new Date(),
          auditDate: new Date(),
          amount: 2100.2,
          loanType: 2,
          memo: '',
          status: 1
        }
      ],
    }

  },

  components: {
    Mainframe
  },

  methods: {

    statusTxt(value) {
      let statusMap = {
        key1: '初审通过',
        key2: '初审未通过等待合规性审核',
        key3: '合规性审核通过待信贷审批',
        key4: '合规性审核拒绝',
        key5: '信贷审批通过待签订合同',
        key6: '合同已签订代发放贷款',
        key7: '贷款已发放'
      };
      return statusMap['key'+value] || value;
    },

    lornTypeTxt(value) {
      let statusMap = {
        key1: '等额本息',
        key2: '等额本金',
      };
      return statusMap['key'+value] || value;
    },

    handleApprove: (data) => {
      console.log('mock approved!')
      auditOk(data).then((response) => {
        console.log('正常响应')
        console.log(response)
      }).catch(error => {
        //发生错误时执行的代码
        console.log('异常响应')
        console.log(error)
      })
    },

    handleDeny: (data) => {
      auditDeny(data).then((response) => {
        alert("审核拒绝");
        //tablefresh hot load .
      }).catch(error => {
        //发生错误时执行的代码
        console.log('异常响应')
        console.log(error)
      })


    },

    loadData: () => {
      getApplyListData().then((response) => {
        console.log('正常响应')
        console.log(response)
      }).catch(error => {
        //发生错误时执行的代码
        console.log('异常响应')
        console.log(error)
      })
    }
  }
}

</script>